<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>keyboard</title>
    <style>
        table.game {
            font-size: 14px;
            border-collapse: collapse;
            width: 100%;
            table-layout: fixed;
        }

        table.game td {
            border: 1px solid #e1e1e1;
            padding: 0;
            height: 50px;
            text-align: center;
        }

        table.game td.current {
            background: #1890ff;
        }

        #jsContainer {
            margin: 0 auto;
            position: fixed;
            top: 50%;
            /* left: 50%; */
            transform: translate(0, -50%)
        }
    </style>
</head>

<body>
    <a href="/static/demo.html" target="_parent">点击退出</a>
    <div id="jsContainer">
        <table class="game">
            <tbody>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td class="current"></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        window.onload = function () {
            document.onkeydown = event => {
                if (!event) return;
                var code = event.keyCode || '';
                if (!{ '37': 1, '38': 1, '39': 1, '40': 1 }[code]) return;
                event.preventDefault && event.preventDefault();
                //请实现按键控制
                var acTd = document.querySelector('.current');
                acTd.classList.remove('current');
                var acTdTr = acTd.parentElement;
                var table = acTdTr.parentElement;
                //给表格所有元素添加行列自定义属性
                Array.from(acTdTr.parentElement.children).forEach((tr, itr) => {
                    Array.from(tr.children).forEach((td, itd) => {
                        td.setAttribute('row', itr); //行
                        td.setAttribute('col', itd); //列
                    })
                })
                // 获取选中元素的行列
                var obj = {
                    col: parseInt(acTd.getAttribute('col')),
                    row: parseInt(acTd.getAttribute('row')),
                    colTotal: acTdTr.children.length - 1,
                    rowTotal: table.children.length - 1
                };
                switch (code) {
                    case 37://左
                        if (obj.col == 0) {
                            acTd = table.querySelector(`td[col='${obj.colTotal}'][row='${obj.row}']`);
                        } else {
                            acTd = table.querySelector(`td[col='${obj.col - 1}'][row='${obj.row}']`);
                        }
                        break;
                    case 38://上
                        if (obj.row == 0) {
                            acTd = table.querySelector(`td[col='${obj.col}'][row='${obj.rowTotal}']`);
                        } else {
                            acTd = table.querySelector(`td[col='${obj.col}'][row='${obj.row - 1}']`);
                        }
                        break;
                    case 39://右

                        if (obj.col == obj.colTotal) {
                            acTd = table.querySelector(`td[col='${'0'}'][row='${obj.row}']`);
                        } else {
                            acTd = table.querySelector(`td[col='${obj.col + 1}'][row='${obj.row}']`);
                        }
                        break;
                    case 40://下
                        if (obj.row == obj.rowTotal) {
                            acTd = table.querySelector(`td[col='${obj.col}'][row='${'0'}']`);
                        } else {
                            acTd = table.querySelector(`td[col='${obj.col}'][row='${obj.row + 1}']`);
                        }
                        break;
                    default:
                        break;
                }
                acTd.classList.add('current');
            };
        }

    </script>
</body>

</html>